$('#banUL').html($('#banUL').html() + $('#banUL').html());
$('#banUL').width($('#banUL>li').length * $('#banUL>li').width());
$('#banUL>li').width(100 / $('#banUL>li').length + '%')
var timer = null;
var index = 0;
clearInterval(timer);
timer = setInterval(lunbo, 6000);
$('#banner').on({
	'swipeLeft': function() {
		index++;
		if(index == $(this).find('#banUL li').length) index = 0;
		$('ol>li').removeClass('active');
		$('ol>li').eq(index % ($(this).find('#banUL li').length / 2)).addClass('active');
		$(this).find('#banUL').animate({
			'translateX': -innerWidth * index + 'px'
		}, 500, function() {
			if(index == $(this).find('#banUL li').length / 2) {
				$('#banUL').css({
					'transform': 'translateX(0)'
				});
				index = 0;
			}
		});
	},
	'swipeRight': function() {
		index--;
		if(index == -1) {
			$('#banUL').css('transform', 'translateX(' + (-innerWidth * $(this).find('#banUL li').length / 2 + 'px') + ')')
			index = ($(this).find('#banUL li').length / 2) - 1;
		}
		$('ol>li').removeClass('active');
		$('ol>li').eq(index % ($(this).find('#banUL li').length / 2)).addClass('active');
		$(this).find('#banUL').animate({
			'translateX': -innerWidth * index + 'px'
		}, 500);
	}
});

function lunbo() {
	index++;
	if(index == $('#banner').find('#banUL>li').length) index = 0;
	$('ol>li').removeClass('active');
	$('ol>li').eq(index % ($('#banner').find('#banUL>li').length / 2)).addClass('active');
	$('#banner').find('#banUL').animate({
		'translateX': -innerWidth * index + 'px'
	}, 500, function() {
		if(index == $('#banner').find('#banUL>li').length / 2) {
			$('#banUL').css({
				'transform': 'translateX(0)'
			});
			index = 0;
		}
	});
};

$('#banUL').on('touchstart', function(e) {
	clearInterval(timer);
	oldL = e.touches[0].clientX;
	needL = e.touches[0].clientX - $(this).offset().left;
}, false)
$("#banUL").on("touchmove", function(e) {
	clearInterval(timer);
	e.preventDefault();
	moveL = e.touches[0].clientX - needL;
	newL = oldL - e.touches[0].clientX;
	if(moveL > 0) {
		$(this).css({
			'transform': 'translateX(0)'
		});
	} else {
		$(this).css({
			'transform': 'translateX(' + moveL + 'px)'
		})
	}
}, false)
$("#banUL").on("touchend", function(e) {
	if(newL > 0 && newL < 35) {
		$(this).css({
			'translateX': -innerWidth * index + 'px'
		})
	}
	if(newL < 0 && -newL < 35) {
		$(this).css({
			'translateX': -innerWidth * index + 'px'
		})
	}
	timer = setInterval(lunbo, 2000);
}, false)